<script lang="ts" setup>
import {
  getWorksAPi,
  SaveWorksAPi,
  submitWorksAPi,
  updatePassword,
  updateWorks,
  uploadFiles,
  userLogOutService
} from '@/api/user'
import {Plus} from '@element-plus/icons-vue'
import { onMounted, reactive, ref, watch} from 'vue'
import type {FormInstance, FormRules, UploadInstance, UploadProps, UploadRawFile} from 'element-plus'
import {ElDialog, ElMessage, ElUpload, genFileId} from "element-plus";
import {useUserStore} from "@/store/modlues/user/user.js";
import videojs from "video.js";
const firstVideo=ref('')
const secondVideo=ref('')
const thirdVideo=ref('')
const forthVideo=ref('')
const userStore=useUserStore()




//表单

// 控制Dialog对话框的显示隐藏
const videoDialog = ref(false);

interface RuleForm {
  workName: string
  workTeam:string
  workProfessional:string
  joinSchool: string
  joinTeam: string
  teachingTeam: string[]
  classroomRecording:[]
  applicationForm: string
  informationFile: string
  userPhone: string
  joinActive:string
  lessonPlan:string
  teachingReport:string,
  talentDevelopmentPlan:string,
  courseStandard:string,
  textbookSelectionNote:string,

}

const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
let ruleForm =ref<RuleForm>({
  workName: '',
  userId:userStore.user.id,
  workTeam:'',
  workProfessional:'',
  joinSchool: '',
  joinTeam: '',
  teachingTeam: [],
  applicationForm: '',
  informationFile:"",
  userPhone:'',
  classroomRecording:[],
  lessonPlan:"",
  teachingReport:"",
  talentDevelopmentPlan:"",
  courseStandard:"",
  textbookSelectionNote:"",
  joinActive:"1"
})

const rules = reactive<FormRules<RuleForm>>({
  workName: [
    { required: true, message: '请填写作品名称', trigger: 'blur' },

  ],
  workProfessional: [
    { required: true, message: '请填写专业分类', trigger: 'blur' },

  ],
  userPhone: [
    { required: true, message: '请填写联系方式', trigger: 'blur' },
    { min: 11, message: '请输入正确手机号',trigger:'blur'}
  ],
  applicationForm:[{
    required: true,
    message: '请上传',
    trigger: 'change',
  }],
  informationFile:[{
    required: true,
    message: '请上传',
    trigger: 'change',
  }],
  joinSchool: [
    {
      required: true,
      message: '请选择学校',
      trigger: 'change',
    },
  ],

  teachingTeam: [
    {
      type: 'array',
      required: true,
      message: '请至少选择一项',
      trigger: 'change',

    },
  ],
  workTeam: [
    {
      required: true,
      message: '请选择分类',
      trigger: 'change',
    },
  ],
  joinTeam: [
    { required: true, message: '请输入参赛团队', trigger: 'blur' },
  ],
})

//第一页
const first=ref(true);
//第二页
const next=ref(false);


// 切换下一页
function submitForm(ruleFormRef){
    next.value=true;
    first.value=false;
  window.scrollTo({
    // top: document.documentElement.offsetHeight, //回到底部
    top: 0, //回到顶部
    left: 0,
    behavior: "auto", //smooth 平滑；auto:瞬间
  })
}



//文件上传
const upload = ref<UploadInstance>()

//按钮功能
//
//取消 点击编辑后显示取消 点击取消后退出编辑模式
const cancel=ref(false);

//上一步
const Fallback=()=>{
  next.value=false;
  first.value=true;
  window.scrollTo({
    // top: document.documentElement.offsetHeight, //回到底部
    top: 0, //回到顶部
    left: 0,
    behavior: "auto", //smooth 平滑；auto:瞬间
  })
}

//保存 调用保存接口
//禁止修改
const disabled=ref(false);
const workId=ref()
const save=async () => {
  console.log(ruleForm.value)
  ruleForm.value.joinActive="1"
  await SaveWorksAPi(ruleForm.value)
      .then((res)=>{
            if(res.code===200){
              workId.value=res.data
              ElMessage.success(res.message)
              disabled.value = true;
              edit.value=false
            }
      },(err)=>{

      })
}
//提交 调用提交接口
const submitWork=async ()=>{
  ruleForm.value.joinActive="1"
    await  submitWorksAPi(ruleForm.value) .then((res)=>{
      if(res.code===200){
        workId.value=res.data
        ElMessage.success(res.message)
        disabled.value = true;
        edit.value=false;
      }else {
        ElMessage.warning(res.message)
      }
    }).catch((err)=>{

    })
}
//编辑 开启修改模式
const startUpdate=async ()=>{
 await updateWorks(workId.value).then((res)=>{
      if(res.code===200){
        disabled.value=false;
        edit.value=true;
        ElMessage.success("作品可编辑")
      }
  }).catch((err)=>{
   edit.value=false;
   disabled.value=true;
 })
}

/**
 * 作品数据回写
 */
const formData=ref({})
const workShow=async ()=>{
 await getWorksAPi()
      .then((res)=>{
        if(res.code===200&&res.data!==null){
          formData.value={...res.data}

        }else {


        }
      })
      .catch((err)=>{

  })
}
// 模拟split函数
// 手动将字符串转换为数组
const teaching=ref([])
function customSplit(str, separator) {
  var result = [];
  var index = str.indexOf(separator);
  while (index !== -1) {
    result.push(str.slice(0, index));
    str = str.slice(index + separator.length);
    index = str.indexOf(separator);
  }
  teaching.value.push(str)
}
const loadData=(data)=>{
  ruleForm.value={
    ...data
  }
  teaching.value=JSON.parse(ruleForm.value.teachingTeam)
  workId.value=ruleForm.value.workId
}
  workShow(); // 在组件挂载后获取并渲染数据
  startUpdate()

const videoData=ref([])
/**
 * 监听detailsData
 */
const isUploads=ref(false)
watch(formData, (newData) => {
    loadData(newData);
    videoData.value=JSON.parse(ruleForm.value.classroomRecording)
    handleNewVideo(videoData.value)
});
const videosData=ref([])

function fixed(){
  window.scrollTo({
    // top: document.documentElement.offsetHeight, //回到底部
    top: 0, //回到顶部
    left: 0,
    behavior: "auto", //smooth 平滑；auto:瞬间
  })
}
const handleVideo=(newData,index)=>{
  if(isUploads.value){
    videosData.value[index]=splitStringBefore(newData[index])
  }
}
const handleNewVideo=(newData)=>{
  for (let i = 0; i < newData.length; i++) {
    const newUrl=splitStringBefore(newData[i])
    videosData.value.push(newUrl)
  }
  isUploads.value=false
}


const fileList = ref('')
// 文件状态改变时的钩子
const fileChange = (fileName,file,index) => {
  const extension = file.name.split(".")[1]
  const size = file.size / 1024 / 1024
  if (extension !== "pdf" && extension !== "docx"&& extension!=="mp4") {
    return ElMessage.warning("只能上传pdf和docx文件")
  }
  if (size > 500) {
    return ElMessage.warning("文件大小不得超过500M")
  } else {
    fileList.value=file.raw
    uploadFile(fileName,index)
  }
}

// 文件上传成功时的钩子
const handleSuccess = (res,fileList) => {
  progress.value=false
  ElMessage({
    message: "文件上传成功",
    type: "success",
    duration: 3 * 1000
  })
}

// 文件上传失败时的钩子
const handleError = (err, fileList,fileName) => {
  ElMessage({
    message: "文件上传失败,请按照格式重新上传文件！",
    type: "error",
    duration: 3 * 1000
  })
  ruleForm[fileName]='';
}
const UploadUrl = () => {
  // 因为action参数是必填项，我们使用二次确认进行文件上传时，直接填上传文件的url会因为没有参数导致api报404，
  // 所以这里将action设置为一个返回为空的方法就行，避免抛错
  return ""
}

const exceedFile = (files, fileList) => {
  ElMessage({
    message: `只能选择 ${limitNum} 个文件，当前共选择了 ${files.length + fileList.length} 个`,
    type: "warning",
    duration: 5 * 1000
  })
}


const progress = ref(false);
const uploadFile = (fileName,index) => {
  if (fileList.value === '') {
    ElMessage({
      message: "请上传文件",
      type: "warning",
      duration: 3 * 1000
    })
  } else {
    const form = new FormData()
    form.append("file", fileList.value)
    const config = {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    };
    //提示正在上传
    progress.value=true
    uploadFiles(form,config).then(
        (res) => {
          if (res.code===200 && res.data.length > 0) {
            const filePath=res.data
            if(fileName==='classroomRecording'){
              // 确保 classroomRecording 是数组
              if (!Array.isArray(ruleForm.value.classroomRecording)) {
                // 如果不是数组，可以尝试初始化为一个空数组
                ruleForm.value.classroomRecording = [];
              }
              // 然后将 filePath 添加到 classroomRecording 数组中
              ruleForm.value.classroomRecording[index]=filePath;
              videoData.value[index]=filePath
              if(index >=0){
                isUploads.value=true
                handleVideo(videoData.value,index)
              }
            }else {
              ruleForm.value[fileName]=filePath
            }
            handleSuccess(res,fileList)
          } else {
            handleError(res, fileList,fileName)
            fileList.value =''
          }
        },
        (err) => {
          handleError(err, fileList,fileName)
          fileList.value = ''
        }
    )
  }
}

/**
 * 取出文件名
 * @param url
 * @returns {string}
 */
const splitStringAfter=(url)=>{
  if (typeof url === 'string'){
    const splitIndex = url.lastIndexOf(':');
    return url.substring(splitIndex + 1)
  }else{
  }
}
/**
 * 取出文件地址
 */
const splitStringBefore=(url)=>{

  if (typeof url === 'string') {
    // 使用 indexOf 寻找第一个冒号的位置
    const firstColonIndex = url.indexOf(':');
  // 使用 indexOf 寻找第二个冒号的位置
    const secondColonIndex = url.indexOf(':', firstColonIndex + 1);
  // 提取第二个冒号前的网址部分
    const extractedUrl = url.substring(0, secondColonIndex);
    return extractedUrl
    // 继续处理 parts
  } else {
  }
}


const handleExceed: UploadProps['onExceed'] = (files) => {
  upload.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  upload.value!.handleStart(file)
}


//判断文件名后缀
const docxOrPdf=(url)=>{
  if(typeof url!=='string'){
    return
  }
  const after=splitStringAfter(url).split('.');
  if (after[after.length-1]==='docx'){
    return true;
  }else {
    return false;
  }
}
const options=[
  {
    lable:"1",
    text: " 1、团队每个成员教龄3年以上，近3年实际承担参赛课程或相关课程教学任务"
  },
  {
    lable:"2",
    text: "2、35岁以下（含）的教师不少于1人或恩政课（二选一）",
  },
  {
    lable:"3",
    text: "3、具备高级专业技术职务或取得高级职业技能等级证书的教师不少于1人-->"
  },
  {
    lable:"4",
    text: "4、专业课程组的教学团队中“双师型”教师占比在50％以上；企业兼职教师数量不超过1名；（此项可选择答题，不是必选项）-->"
  },
  {
    lable:"5",
    text: "5、近2年曾获得过全国职业院校技能大赛教学能力比赛一等奖的教学团队各成员不能报名参赛，其所有成员所在学校不能以同一公共基础课报名参加公共基础课程组，或不能以同一专业报名参加专业（技能）课程组的比赛：近2年曾获得国赛等奖的教学团队需要调整成员方能报名参赛（至多保留2名原成员，且必须有新成员）。近2年获省赛奖励的作品，未作重大修改不得参赛。获得2022年青岛市中等职业学校教学能力比赛一等奖的作品，不能参赛"
  }
]



const spiltVideo=(url)=>{
  if(typeof url ==='string'){
// 使用 split 方法按照冒号分割字符串，并获取第一个部分
     return url.split(':')[0]
  }else {
    return
  }
}
const videosrc=ref('')
const videoPlay=(VideoSrc)=> {

  videoDialog.value = true
  videosrc.value =VideoSrc
}
const isClose=(i)=>{
  videosData.value[i]=null
  videoData.value[i]=null
}

const edit=ref(true)
</script>
<template>

    <!-- 第一页 -->
    <div id="#app"  v-show="first" >
        <div class="back">
            <div class="body-text">
                <!-- 顶部：填写作品信息 上传参赛作品 -->
                <div style="position: relative;">
                    <div class="total-block">
                    <div class="total-left-1">
                        <text style="color:white;font-weight: bold;">填写作品信息</text>
                    </div>
                    <div class="total-right-1">
                        <text style="font-weight: bold;color: black">上传参赛作品</text>
                    </div>
                     <!-- 中间的三角形 -->
                    <div class="total-mid-1"></div>
                    </div>
                </div>
                <!-- 编辑按钮 -->
                <div style="width:100%;margin-bottom:0px"><el-row class="mb-4" style="margin-left: 80%;">
                    <el-button type="primary" @click="startUpdate()" style="width: 75px; height: 35px;">
                        <svg style="width: 1em; height: 1em;margin-right: 2px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="m199.04 672.64 193.984 112 224-387.968-193.92-112-224 388.032zm-23.872 60.16 32.896 148.288 144.896-45.696zM455.04 229.248l193.92 112 56.704-98.112-193.984-112-56.64 98.112zM104.32 708.8l384-665.024 304.768 175.936L409.152 884.8h.064l-248.448 78.336zm384 254.272v-64h448v64h-448z"></path></svg>
                      <text style="font-size:13px">编辑</text>
                    </el-button>
                </el-row></div>
                <!-- 表单部分 -->
                <div style="width: 600px;border: #181818 0px solid;margin-top: 15px;margin-right: 100px" >
                  <el-form
                      ref="ruleFormRef"
                      :model="ruleForm"
                      :rules="rules"
                      label-width="150px"
                      class="demo-ruleForm"
                      :size="formSize"
                      status-icon
                      :disabled="disabled"
                  >
                      <!--     作品名称          -->
                  <el-form-item label="作品名称" prop="workName" >
                    <el-input v-model="ruleForm.workName"   placeholder="请输入" />
                  </el-form-item>
                  <!--     所属分类          -->
                  <el-form-item label="所属分类" prop="workTeam" >
                    <el-radio-group v-model="ruleForm.workTeam"   style="width: 400px;">
                      <el-radio label="1">思政课程组</el-radio>
                      <el-radio label="2">专业技能课程一组</el-radio>
                      <el-radio label="3">公共基础课程组(不含思政)</el-radio>
                      <el-radio label="4">专业技能课程二组</el-radio>
                    </el-radio-group>
                  </el-form-item>
                    <!--     所属专业          -->
                    <el-form-item label="所属专业" prop="workProfessional" >
                      <el-input v-model="ruleForm.workProfessional"  placeholder="请输入" />
                    </el-form-item>
                  <!--     参赛学校          -->
                  <el-form-item label="参赛学校"  prop="joinSchool" >
                    <el-select v-model="ruleForm.joinSchool" placeholder="请选择">
                      <el-option label="清华大学" value="qinghua" />
                      <el-option label="北京大学" value="beijing" />
                    </el-select>
                  </el-form-item>
                  <!--     参赛团队          -->
                  <el-form-item label="参赛团队" prop="joinTeam" >
                    <el-input v-model="ruleForm.joinTeam" rows="3" @input="fixed()" type="textarea" placeholder="请输入，多人用逗号隔开" />
                  </el-form-item>
                  <!--     参赛教学团队资格          -->
                  <el-form-item label="参赛教学团队资格"  style="width: 680px;">
                    <el-checkbox-group v-model="teaching">
                      <template v-for="option in options" >
                        <el-checkbox style="margin-top: 20px;margin-bottom: 5px"
                                     :label="option.lable" size="large"  >
                          {{option.text}}
                        </el-checkbox>
                      </template>
                    </el-checkbox-group>
                  </el-form-item>
                  <!--     参赛报名表          -->
                  <el-form-item style="margin-top:70px;disfplay: flex;

                  align-items: center;
                  height: 60px;border: black 0px solid" label="参赛报名表" prop="applicationForm">
                    <el-upload
                        accept=".pdf,.docx"
                        class="upload-demo"
                        limit="1"
                        ref="upload"
                        :auto-upload="false"
                        v-model="ruleForm.applicationForm"
                        :action="UploadUrl()"
                        @change="(file) => fileChange('applicationForm', file)"
                        :on-exceed="handleExceed"
                        :on-success="handleSuccess"
                        :on-error="handleError"
                        :show-file-list="false"
                    >
                      <el-button v-if="ruleForm.applicationForm===''"  type="primary" class="upload-button">
                        <svg style="width: 1em; height: 1em;margin-right: 2px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64m384-578.304V704h-64V247.296L237.248 490.048 192 444.8 508.8 128l316.8 316.8-45.312 45.248z"></path></svg>
                        <text style="font-size:13px" >上传</text>
                      </el-button>
                      <div v-else style="display: flex;flex-direction: row;border: black 0px solid;width: 450px">
                        <div v-if="ruleForm.applicationForm!==''" style="display: flex;flex-direction: row;">
                          <img v-if="docxOrPdf(splitStringAfter(ruleForm.applicationForm))" class="word" src="../../assets/word.png">
                          <img v-else class="pdf" src="../../assets/pdf.png">
                        </div>
                        <text style="margin-top: 2px;width: 320px">{{splitStringAfter(ruleForm.applicationForm)}}</text>
                        <el-button type="primary" class="upload-button" style="width: 100px;margin-top: 4px;margin-left: auto">
                          <svg style="width: 1em; height: 1em;margin-right: 5px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64m384-578.304V704h-64V247.296L237.248 490.048 192 444.8 508.8 128l316.8 316.8-45.312 45.248z"></path></svg>
                          重新上传
                        </el-button>
                      </div>

                    </el-upload>
                  </el-form-item >
                  <!--     信息公示件          -->
                  <el-form-item label="信息公式件" prop="InformationFile" style="height: 40px">
                    <el-upload
                        accept=".pdf,.docx"
                        class="upload-demo"
                        limit="3"
                        :auto-upload="false"
                        v-model="ruleForm.informationFile"
                        :action="UploadUrl()"
                        @change="(file) => fileChange('informationFile', file)"
                        :on-exceed="handleExceed"
                        :on-success="handleSuccess"
                        :on-error="handleError"
                        :show-file-list="false">
                      <el-button v-if="ruleForm.informationFile===''"  type="primary" class="upload-button">
                        <svg style="width: 1em; height: 1em;margin-right: 2px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64m384-578.304V704h-64V247.296L237.248 490.048 192 444.8 508.8 128l316.8 316.8-45.312 45.248z"></path></svg>
                        <text style="font-size:13px" >上传</text>
                      </el-button>
                      <div v-else style="display: flex;flex-direction: row;border: black 0px solid;width: 450px">
                        <div v-if="ruleForm.informationFile!==''" style="display: flex;flex-direction: row;">
                          <img v-if="docxOrPdf(splitStringAfter(ruleForm.informationFile))" class="word" src="../../assets/word.png">
                          <img v-else class="pdf" src="../../assets/pdf.png">
                        </div>
                        <text style="margin-top: 2px;width: 320px">{{splitStringAfter(ruleForm.informationFile)}}</text>
                        <el-button type="primary" class="upload-button" style="width: 100px;margin-top: 4px;margin-left: auto">
                          <svg style="width: 1em; height: 1em;margin-right: 5px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64m384-578.304V704h-64V247.296L237.248 490.048 192 444.8 508.8 128l316.8 316.8-45.312 45.248z"></path></svg>
                          重新上传
                        </el-button>
                      </div>
                    </el-upload  >

                  </el-form-item>
                  <!--     联系方式          -->
                  <el-form-item label="联系方式" prop="userPhone" style="margin-top: 40px">
                    <el-input style="height: 40px" v-model="ruleForm.userPhone" placeholder="填写一人的联系方式即可" />
                  </el-form-item>

                  </el-form>
                      <!--       下一步           -->
                  <el-form-item style="margin-top: 70px;margin-left: 30%">
                    <el-button type="primary" style="width: 300px;height: 40px" @click="submitForm(ruleFormRef)">
                      下一步
                    </el-button>
                  </el-form-item>
                </div>
            </div>
          <!-- 底部 -->
          <div class="bottom-1">
            <text class="black-text-1">联系电话：王老师 18888888888 ｜ 技术支持：唐工17706521231 ｜ 服务电话：朱老师1596618040 ｜ ＠山东依智科技产业开发集团有限公司＠2023鲁ICP备2020045516号—3</text>
          </div>

          <div class="black-bottom">
            <text class="black-text-1" style="margin-top: 5px;margin-bottom: 8px;" >Copyright ? 2003-2024 zhihuijiaoxue. All rights reserved.</text>
          </div>
        </div>
    </div     >

    <!-- 第二页  -->
    <div id="app" v-show="next" style="height: 100%;width: 100%">

    <div class="back">
      <div class="body-text">

        <!-- 顶部：填写作品信息 上传参赛作品 -->
        <div style="position: relative;">
          <div class="total-block">
            <div class="total-left">
              <text style="color:black;font-weight: bold;">填写作品信息</text>
            </div>
            <div class="total-right">
              <text style="font-weight: bold;color: white">上传参赛作品</text>
            </div>
            <!-- 中间的三角形 -->
            <div class="total-mid"></div>
          </div>
        </div>
        <!-- 编辑按钮 -->
        <div style="width:100%;margin-bottom:0px"><el-row class="mb-4" style="margin-left: 5%;margin-bottom: 10px">
          <el-button type="primary" @click="startUpdate()" style="width: 75px; height: 35px;">
            <svg style="width: 1em; height: 1em;margin-right: 2px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="m199.04 672.64 193.984 112 224-387.968-193.92-112-224 388.032zm-23.872 60.16 32.896 148.288 144.896-45.696zM455.04 229.248l193.92 112 56.704-98.112-193.984-112-56.64 98.112zM104.32 708.8l384-665.024 304.768 175.936L409.152 884.8h.064l-248.448 78.336zm384 254.272v-64h448v64h-448z"></path></svg>
            <text style="font-size:13px">编辑</text>
          </el-button>
        </el-row></div>

        <!-- 表单部分 -->
        <el-form :disabled="disabled">
          <div style="width: 100%;border: #DCDCDC 1px solid;margin-top: 1px;border-radius: 8px;display: flex;flex-direction: row">

            <!--    表头      -->
            <div style="width: 240px;border-right: #DCDCDC 1px solid;">
              <div style="margin-top: 100px;border-bottom:#DCDCDC 1px solid;width: 100%;padding-bottom: 800px">
                <text style="margin-left: 150px" class="formText">课堂实录</text>
              </div>
              <div style="margin-top: 15px;border-bottom:#DCDCDC 1px solid;width: 100%;padding-bottom: 15px">
                <text style="margin-left: 175px" class="formText">教案</text>
              </div>
              <div style="margin-top: 15px;border-bottom:#DCDCDC 1px solid;width: 100%;padding-bottom: 15px">
                <text style="margin-left: 119px" class="formText">教学实施报告</text>
              </div>
              <div style="margin-top: 15px;border-bottom:#DCDCDC 1px solid;width: 100%;padding-bottom: 15px">
                <text style="margin-left: 91px" class="formText">专业人才培养方案</text>
              </div>
              <div style="margin-top: 15px;border-bottom:#DCDCDC 1px solid;width: 100%;padding-bottom: 15px">
                <text style="margin-left: 147px" class="formText">课程标准</text>
              </div>
              <div style="margin-top: 15px;width: 100%;padding-bottom: 15px">
                <text style="margin-left: 119px;" class="formText">教程选用说明</text>
              </div>
            </div>

            <!--     表单文件     -->
            <div style="">
              <!--     注意事项       -->
              <div style="margin-top: 10px;margin-left: 20px;">
                <text style="font-size: 11px;color: #C0C0C0">请上传MP4格式的视频，最多可上传12个视频，且单个视频文件大小不超过500M</text>
              </div>
              <!--     视频文件     -->
              <div style="border-bottom: #DCDCDC 1px solid;height: 881px;width: 758px">
                <!--     团队1       -->
                <div style="width: 100%;margin-left: 20px;margin-bottom: 10px;height: 200px">
                  <el-divider style="margin-bottom: 10px;margin-top: 10px;width: 720px"/>
                  <text class="teamText">团队 1</text>
                  <!--      视频预览框        -->
                  <div style="margin-top: 10px;display: flex;flex-direction: row">
                    <div>
                      <el-upload v-if="videosData[0]==null"
                                 accept=".mp4"
                                 class="upload-demo"
                                 limit="3"
                                 :auto-upload="false"
                                 v-model="ruleForm.classroomRecording"
                                 :action="UploadUrl()"
                                 @change="(file) => fileChange('classroomRecording', file,0)"
                                 :on-exceed="exceedFile"
                                 :on-success="handleSuccess"
                                 :on-error="handleError"
                                 :show-file-list="false"
                                 style="border: #181818 1px solid;width: 180px;height: 100px;
                        display: flex;
                        justify-content: center;
                          align-items: center;margin-top: 10px;border: #afafaf 2px dashed;border-radius: 8px;"
                      >
                        <div  style="display: flex;flex-direction: column;justify-content: center;
                          align-items: center;margin-top: 10px;">
                          <el-icon class="uploadPlus"><Plus /></el-icon>
                          <text style="color: #afafaf">上传视频</text>
                        </div>
                      </el-upload>
                      <!--    视频回显    -->
                      <div v-else style="width: 180px;height: 100px;margin-top: 10px;
                       display: flex;justify-content: center;border: #afafaf 2px dashed;border-radius: 10px;padding: 0 0 0 0;
                          align-items: center;position:relative;">
                        <video  :src="videosData[0]" style="width: 100%;border-radius: 10px">
                        </video>
                        <button v-if="videosData[0]!==''" type='button' @click="videoPlay(videosData[0])" style="background-color: unset;position: absolute;border: 0px;display: flex">
                          <img  style="width: 3em;height: 3em;opacity: 0.7" src="../../assets/play.png">
                        </button>
                        <button @click="isClose(0)" v-if="videosData[0]!==''" v-show="edit" type='button' style="border: 0px;position: absolute;background-color: unset;margin-left: 160px;margin-bottom: 80px">
                          <img  style="width: 2em;height: 2em;opacity: 0.8"  src="../../assets/delete.png">
                        </button>
                      </div>

                      <!-- 作品名称 -->
                      <div v-if="videosData[0]!==''" style="margin-top: 10px;width: 180px">
                        <text>{{splitStringAfter(videoData[0])}}</text>
                      </div>
                    </div>
                  </div>
                </div>
                <!--     团队2       -->
                <div style="width: 100%;margin-left: 20px;height: 200px">
                  <el-divider style="margin-bottom: 10px;margin-top: 10px;width: 720px"/>
                  <text class="teamText">团队 2</text>
                  <!--      视频预览框        -->
                  <div style="margin-top: 10px;display: flex;flex-direction: row">
                    <div>
                      <el-upload v-if="videosData[1]==null"
                                 accept=".mp4"
                                 class="upload-demo"
                                 limit="3"
                                 :auto-upload="false"
                                 v-model="ruleForm.classroomRecording"
                                 :action="UploadUrl()"
                                 @change="(file) => fileChange('classroomRecording', file,1)"
                                 :on-exceed="exceedFile"
                                 :on-success="handleSuccess"
                                 :on-error="handleError"
                                 :show-file-list="false"
                                 style="border: #181818 1px solid;width: 180px;height: 100px;
                        display: flex;
                        justify-content: center;
                          align-items: center;margin-top: 10px;border: #afafaf 2px dashed;border-radius: 8px;"
                      >
                        <div  style="display: flex;flex-direction: column;justify-content: center;
                          align-items: center;margin-top: 10px;">
                          <el-icon class="uploadPlus"><Plus /></el-icon>
                          <text style="color: #afafaf">上传视频</text>
                        </div>
                      </el-upload>
                      <!--    视频回显    -->
                      <div v-else style="width: 180px;height: 100px;margin-top: 10px;
                    display: flex;justify-content: center;border: #afafaf 2px dashed;border-radius: 10px;padding: 0 0 0 0;
                          align-items: center;position:relative;">
                        <video :src="videosData[1]" style="width: 100%;border-radius: 10px"></video>
                        <button  v-if="videosData[1]!==''" type='button'@click="videoPlay(videosData[1])" style="background-color: unset;position: absolute;border: 0px;display: flex">
                          <img  style="width: 3em;height: 3em;opacity: 0.7" src="../../assets/play.png">
                        </button>
                        <button  v-if="videosData[1]!==''" v-show="edit"  @click="isClose(1)" type='button' style="border: 0px;position: absolute;background-color: unset;margin-left: 160px;margin-bottom: 80px">
                          <img  style="width: 2em;height: 2em;opacity: 0.8"  src="../../assets/delete.png">
                        </button>
                      </div>
                      <!-- 作品名称 -->
                      <div v-if="videosData[1]!==''" style="margin-top: 10px;width: 180px">
                        <text>{{splitStringAfter(videoData[1])}}</text>
                      </div>
                    </div>
                  </div>
                </div>

                <!--     团队3       -->
                <div style="width: 100%;margin-left: 20px;margin-bottom: 20px;height: 200px">
                  <el-divider style="margin-bottom: 10px;margin-top: 10px;width: 720px"/>
                  <text class="teamText">团队 3</text>
                  <!--      视频预览框        -->
                  <div style="margin-top: 10px;display: flex;flex-direction: row">
                    <div>
                      <el-upload v-if="videosData[2]==null"
                                 accept=".mp4"
                                 class="upload-demo"
                                 limit="3"
                                 :auto-upload="false"
                                 v-model="ruleForm.classroomRecording"
                                 :action="UploadUrl()"
                                 @change="(file) => fileChange('classroomRecording', file,2)"
                                 :on-exceed="exceedFile"
                                 :on-success="handleSuccess"
                                 :on-error="handleError"
                                 :show-file-list="false"
                                 style="border: #181818 1px solid;width: 180px;height: 100px;
                        display: flex;
                        justify-content: center;
                          align-items: center;margin-top: 10px;border: #afafaf 2px dashed;border-radius: 8px;"
                      >
                        <div  style="display: flex;flex-direction: column;justify-content: center;
                          align-items: center;margin-top: 10px;">
                          <el-icon class="uploadPlus"><Plus /></el-icon>
                          <text style="color: #afafaf">上传视频</text>
                        </div>
                      </el-upload>

                      <!--    视频回显    -->
                      <div v-else style="width: 180px;height: 100px;margin-top: 10px;
                    display: flex;justify-content: center;border: #afafaf 2px dashed;border-radius: 10px;padding: 0 0 0 0;
                          align-items: center;position:relative;">
                        <video :src="videosData[2]" style="width: 100%;border-radius: 10px"></video>
                        <button v-if="videosData[2]!==''" type='button' @click="videoPlay(videosData[2])"  style="background-color: unset;position: absolute;border: 0px;display: flex">
                          <img  style="width: 3em;height: 3em;opacity: 0.7" src="../../assets/play.png">
                        </button>
                        <button  v-if="videosData[2]!==''" v-show="edit" @click="isClose(2)"type='button' style="border: 0px;position: absolute;background-color: unset;margin-left: 160px;margin-bottom: 80px">
                          <img  style="width: 2em;height: 2em;opacity: 0.8"  src="../../assets/delete.png">
                        </button>

                      </div>
                      <!-- 作品名称 -->
                      <div  v-if="videosData[2]!==''" style="margin-top: 10px;width: 180px">
                        <text>{{splitStringAfter(videoData[2])}}</text>
                      </div>
                    </div>
                  </div>
                </div>
                <!--     团队4       -->
                <div style="width: 100%;margin-left: 20px;margin-bottom: 20px;height: 200px">
                  <el-divider style="margin-bottom: 10px;margin-top: 10px;width: 720px"/>
                  <text class="teamText">团队 4</text>
                  <!--      视频预览框        -->
                  <div style="margin-top: 10px;display: flex;flex-direction: row">
                    <div>
                      <el-upload v-if="videosData[3]==null"
                                 accept=".mp4"
                                 class="upload-demo"
                                 limit="3"
                                 :auto-upload="false"
                                 v-model="ruleForm.classroomRecording"
                                 :action="UploadUrl()"
                                 @change="(file) => fileChange('classroomRecording', file,3)"
                                 :on-exceed="exceedFile"
                                 :on-success="handleSuccess"
                                 :on-error="handleError"
                                 :show-file-list="false"
                                 style="border: #181818 1px solid;width: 180px;height: 100px;
                        display: flex;
                        justify-content: center;
                          align-items: center;margin-top: 10px;border: #afafaf 2px dashed;border-radius: 8px;"
                      >
                        <div  style="display: flex;flex-direction: column;justify-content: center;
                          align-items: center;margin-top: 10px;">
                          <el-icon class="uploadPlus"><Plus /></el-icon>
                          <text style="color: #afafaf">上传视频</text>
                        </div>

                      </el-upload>
                      <!--    视频回显    -->
                      <div v-else style="width: 180px;height: 100px;margin-top: 10px;
                    display: flex;justify-content: center;border: #afafaf 2px dashed;border-radius: 10px;padding: 0 0 0 0;
                          align-items: center;position:relative;">
                        <video :src="videosData[3]" style="width: 100%;border-radius: 10px"></video>
                        <button v-if="videosData[3]!==''" type='button' @click="videoPlay(videosData[3])" style="background-color: unset;position: absolute;border: 0px;display: flex">
                          <img  style="width: 3em;height: 3em;opacity: 0.7" src="../../assets/play.png">
                        </button>
                        <button v-if="videosData[3]!==''" v-show="edit" @click="isClose(3)" type='button' style="border: 0px;position: absolute;background-color: unset;margin-left: 160px;margin-bottom: 80px">
                          <img  style="width: 2em;height: 2em;opacity: 0.8"  src="../../assets/delete.png">
                        </button>

                      </div>
                      <!-- 作品名称 -->
                      <div v-if="videosData[3]!==''" style="margin-top: 10px;width: 180px">
                        <text>{{splitStringAfter(videoData[3])}}</text>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!--      教案      -->
              <div class="fileClass" style="height: 54px">
                <el-upload
                    accept=".pdf,.docx"
                    class="upload-demo"
                    limit="3"
                    :auto-upload="false"
                    v-model="ruleForm.lessonPlan"
                    :action="UploadUrl()"
                    @change="(file) => fileChange('lessonPlan', file)"
                    :on-exceed="exceedFile"
                    :on-success="handleSuccess"
                    :on-error="handleError"
                    :show-file-list="false"
                    style="display: flex;flex-direction: row;"
                >
                  <div v-if="ruleForm.lessonPlan===''" style="display: flex;flex-direction: row">
                    <el-button v-if="ruleForm.lessonPlan===''" type="primary" class="upload-button" style="margin-top: 5px;margin-left: 10px">
                      <svg style="width: 1em; height: 1em;margin-right: 2px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64m384-578.304V704h-64V247.296L237.248 490.048 192 444.8 508.8 128l316.8 316.8-45.312 45.248z"></path></svg>
                      上传
                    </el-button>
                    <div class="el-upload__tip text-red" style="margin-top: 10px;color: #afafaf;margin-left: 10px;width: 400px">
                      请上传100MB以内docx或pdf格式文件
                    </div>
                  </div>
                  <div v-else style="display: flex;flex-direction: row;align-items: center;width: 750px">
                    <div v-if="ruleForm.lessonPlan!==''" style="display: flex;flex-direction: row;">
                      <img v-if="docxOrPdf(splitStringAfter(ruleForm.lessonPlan))" class="word" src="../../assets/word.png">
                      <img v-else class="pdf" src="../../assets/pdf.png">
                    </div>
                    <text style="margin-top: 2px">{{splitStringAfter(ruleForm.lessonPlan)}}</text>
                    <el-button type="primary" class="upload-button" style="margin-left: auto;margin-top: 4px;">
                      <svg style="width: 1em; height: 1em;margin-right: 2px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64m384-578.304V704h-64V247.296L237.248 490.048 192 444.8 508.8 128l316.8 316.8-45.312 45.248z"></path></svg>
                      重新上传
                    </el-button>
                  </div>

                </el-upload>

              </div>
              <!--      教学实施报告      -->
              <div class="fileClass" style="height: 55.5px">
                <el-upload
                    accept=".pdf,.docx"
                    class="upload-demo"
                    limit="3"
                    :auto-upload="false"
                    v-model="ruleForm.teachingReport"
                    :action="UploadUrl()"
                    @change="(file) => fileChange('teachingReport', file)"
                    :on-exceed="exceedFile"
                    :on-success="handleSuccess"
                    :on-error="handleError"
                    :show-file-list="false"
                    style="display: flex;flex-direction: row;"
                >
                  <div v-if="ruleForm.teachingReport===''" style="display: flex;flex-direction: row">
                    <el-button type="primary" class="upload-button" style="margin-top: 5px;margin-left: 10px">
                      <svg style="width: 1em; height: 1em;margin-right: 2px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64m384-578.304V704h-64V247.296L237.248 490.048 192 444.8 508.8 128l316.8 316.8-45.312 45.248z"></path></svg>
                      上传
                    </el-button>

                    <div class="el-upload__tip text-red" style="margin-top: 10px;color: #afafaf;margin-left: 10px;width: 400px">
                      请上传100MB以内docx或pdf格式文件
                    </div>
                  </div>

                  <div v-else style="display: flex;flex-direction: row;align-items: center;width: 750px">
                    <div v-if="ruleForm.teachingReport!==''" style="display: flex;flex-direction: row;">
                      <img v-if="docxOrPdf(splitStringAfter(ruleForm.teachingReport))" class="word" src="../../assets/word.png">
                      <img v-else class="pdf" src="../../assets/pdf.png">
                    </div>
                    <text style="margin-top: 2px">{{splitStringAfter(ruleForm.teachingReport)}}</text>
                    <el-button type="primary" class="upload-button" style="margin-left: auto;margin-top: 4px;">
                      <svg style="width: 1em; height: 1em;margin-right: 2px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64m384-578.304V704h-64V247.296L237.248 490.048 192 444.8 508.8 128l316.8 316.8-45.312 45.248z"></path></svg>
                      重新上传
                    </el-button>
                  </div>

                </el-upload>

              </div>

              <!--      专业人才培养方案      -->
              <div class="fileClass" style="height: 54.5px">
                <el-upload
                    accept=".pdf,.docx"
                    class="upload-demo"
                    limit="3"
                    :auto-upload="false"
                    v-model="ruleForm.talentDevelopmentPlan"
                    :action="UploadUrl()"
                    @change="(file) => fileChange('talentDevelopmentPlan', file)"
                    :on-exceed="exceedFile"
                    :on-success="handleSuccess"
                    :on-error="handleError"
                    :show-file-list="false"
                    style="display: flex;flex-direction: row"
                >
                  <div v-if="ruleForm.talentDevelopmentPlan===''" style="display: flex;flex-direction: row">
                    <el-button type="primary" class="upload-button" style="margin-top: 5px;margin-left: 10px">
                      <svg style="width: 1em; height: 1em;margin-right: 2px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64m384-578.304V704h-64V247.296L237.248 490.048 192 444.8 508.8 128l316.8 316.8-45.312 45.248z"></path></svg>
                      上传
                    </el-button>
                    <div class="el-upload__tip text-red" style="margin-top: 10px;color: #afafaf;margin-left: 10px;width: 400px">
                      请上传100MB以内docx或pdf格式文件
                    </div>
                  </div>
                  <div v-else style="display: flex;flex-direction: row;align-items: center;width: 750px">
                    <div v-if="ruleForm.talentDevelopmentPlan!==''" style="display: flex;flex-direction: row;">
                      <img v-if="docxOrPdf(splitStringAfter(ruleForm.talentDevelopmentPlan))" class="word" src="../../assets/word.png">
                      <img v-else class="pdf" src="../../assets/pdf.png">
                    </div>
                    <text style="margin-top: 2px">{{splitStringAfter(ruleForm.talentDevelopmentPlan)}}</text>
                    <el-button type="primary" class="upload-button" style="margin-left: auto;margin-top: 4px;">
                      <svg style="width: 1em; height: 1em;margin-right: 2px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64m384-578.304V704h-64V247.296L237.248 490.048 192 444.8 508.8 128l316.8 316.8-45.312 45.248z"></path></svg>
                      重新上传
                    </el-button>
                  </div>
                </el-upload>

              </div>
              <!--      课程标准      -->
              <div class="fileClass">
                <el-upload
                    accept=".pdf,.docx"
                    class="upload-demo"
                    limit="3"
                    :auto-upload="false"
                    v-model="ruleForm.courseStandard"
                    :action="UploadUrl()"
                    @change="(file) => fileChange('courseStandard', file)"
                    :on-exceed="exceedFile"
                    :on-success="handleSuccess"
                    :on-error="handleError"
                    :show-file-list="false"
                    style="display: flex;flex-direction: row"
                >
                  <div v-if="ruleForm.courseStandard===''" style="display: flex;flex-direction: row">
                    <el-button type="primary" class="upload-button" style="margin-top: 5px;margin-left: 10px">
                      <svg style="width: 1em; height: 1em;margin-right: 2px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64m384-578.304V704h-64V247.296L237.248 490.048 192 444.8 508.8 128l316.8 316.8-45.312 45.248z"></path></svg>
                      上传
                    </el-button>

                    <div class="el-upload__tip text-red" style="margin-top: 10px;color: #afafaf;margin-left: 10px;width: 400px">
                      请上传100MB以内docx或pdf格式文件
                    </div>
                  </div>
                  <div v-else style="display: flex;flex-direction: row;align-items: center;width: 750px">
                    <div v-if="ruleForm.courseStandard!==''" style="display: flex;flex-direction: row;">
                      <img v-if="docxOrPdf(splitStringAfter(ruleForm.courseStandard))" class="word" src="../../assets/word.png">
                      <img v-else class="pdf" src="../../assets/pdf.png">
                    </div>
                    <text style="margin-top: 2px">{{splitStringAfter(ruleForm.courseStandard)}}</text>
                    <el-button type="primary" class="upload-button" style="margin-left: auto;margin-top: 4px;">
                      <svg style="width: 1em; height: 1em;margin-right: 2px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64m384-578.304V704h-64V247.296L237.248 490.048 192 444.8 508.8 128l316.8 316.8-45.312 45.248z"></path></svg>
                      重新上传
                    </el-button>
                  </div>

                </el-upload>

              </div>

              <!--      教材选用说明      -->
              <div>
                <el-upload
                    accept=".pdf,.docx"
                    class="upload-demo"
                    limit="3"
                    :auto-upload="false"
                    v-model="ruleForm.textbookSelectionNote"
                    :action="UploadUrl()"
                    @change="(file) => fileChange('textbookSelectionNote', file)"
                    :on-exceed="exceedFile"
                    :on-success="handleSuccess"
                    :on-error="handleError"
                    :show-file-list="false"
                    style="display: flex;flex-direction: row"
                >
                  <div v-if="ruleForm.textbookSelectionNote===''" style="display: flex;flex-direction: row;margin-top: 7px">
                    <el-button v-if="ruleForm.textbookSelectionNote===''"  type="primary" class="upload-button" style="margin-top: 5px;margin-left: 10px">
                      <svg style="width: 1em; height: 1em;margin-right: 2px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64m384-578.304V704h-64V247.296L237.248 490.048 192 444.8 508.8 128l316.8 316.8-45.312 45.248z"></path></svg>
                      上传
                    </el-button>
                    <div class="el-upload__tip text-red" style="margin-top: 10px;color: #afafaf;margin-left: 10px;width: 400px">
                      请上传100MB以内docx或pdf格式文件
                    </div>
                  </div>

                  <div v-else style="display: flex;flex-direction: row;align-items: center;width: 750px;margin-top: 10px">
                    <div v-if="ruleForm.textbookSelectionNote!==''" style="display: flex;flex-direction: row;">
                      <img v-if="docxOrPdf(splitStringAfter(ruleForm.textbookSelectionNote))" class="word" src="../../assets/word.png">
                      <img v-else class="pdf" src="../../assets/pdf.png">
                    </div>
                    <text style="margin-top: 2px">{{splitStringAfter(ruleForm.textbookSelectionNote)}}</text>
                    <el-button type="primary" class="upload-button" style="margin-left: auto;margin-top: 4px;">
                      <svg style="width: 1em; height: 1em;margin-right: 2px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64m384-578.304V704h-64V247.296L237.248 490.048 192 444.8 508.8 128l316.8 316.8-45.312 45.248z"></path></svg>
                      重新上传
                    </el-button>
                  </div>
                </el-upload>

              </div>
            </div>
          </div>
        </el-form>

        <!--    按钮部分    -->
        <div style="display: flex;flex-direction: row;margin-top: 30px">
          <el-button @click="Fallback()" class="button-style" type="primary">上一步</el-button>
          <el-button @click="save()" class="button-style" type="primary">保存</el-button>
          <el-button class="button-style" type="primary" @click="submitWork">提交</el-button>
          <el-button v-show="cancel" class="button-style" type="info" >取消</el-button>
        </div>


      </div>
    <!--   文件上传提示   -->
      <el-dialog
          style="padding: 0;border-radius: 10px;background-color: #F5F5F5"
          :close-on-click-modal = "false"
          v-model="progress"
          width="400"

          align-center
          :show-close="false"
          :destroy-on-close="true"
      >
        <div style="display: flex;flex-direction: row;margin-top: 0px">
          <text style="margin-left:120px;color: #4682B4">正在努力上传中</text>
          <img style="height: 25px;margin-left: 15px" src="../../assets/load.gif">
        </div>
      </el-dialog>

      <!--   文件上传提示   -->
      <el-dialog
          :append-to-body="true"
          style="padding: 0;border-radius: 10px;background-color: #F5F5F5"
          :close-on-click-modal = "false"
          v-model="progress"
          width="400"

          align-center
          :show-close="false"
          :destroy-on-close="true"
      >
        <div style="display: flex;flex-direction: row;margin-top: 0px">
          <text style="margin-left:120px;color: #4682B4">正在努力上传中</text>
          <img style="height: 25px;margin-left: 15px" src="../../assets/load.gif">
        </div>
      </el-dialog>

      <!--     视频播放       -->
      <el-dialog style="background-color: black;margin-top: 40px" v-model="videoDialog"  :close-on-click-modal="false" destroy-on-close>
        <template #footer>
          <video ref="vueMiniPlayer" controls autoplay :src="videosrc" style="width: 100%;height: 100%"/>
        </template>
      </el-dialog>


      <!-- 底部 -->
      <div class="black-bottom-2">
        <text class="black-text-2" style="margin-top: 12px;" >如有使用问题，请联系唐工：17856424152</text>
        <text class="black-text-2" style="margin-bottom: 12px;" >Copyright ? 2003-2024 zhihuijiaoxue. All rights reserved.</text>
      </div>
    </div>
  </div>

</template>


<style scoped>























.black-bottom{
  border-top: #747474 0.3px solid;
  background-color: black;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


.button-style{
  width: 150px;
  height: 40px;
  margin-left: 10px;
  margin-right: 10px;
}


.fileClass{
  display: flex;

  height: 55px;
  border-bottom: #DCDCDC 1px solid;
}

.uploadPlus{

  color: #afafaf;
}


.teamText{
  font-size: 16px;
}


.formText{
  font-size: 14px;
  font-weight: bold;
}

.black-text-2{

  color:#afafaf;
  font-size: 11px;

}

.black-bottom-2{
  margin-top: 20px;
  background-color: black;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


.el-checkbox__label {
  display: inline;
  width:250px;


  line-height: 20px;
}

.el-checkbox{
  white-space: pre-line;
  line-height: 20px;
}


.upload-button{
  color: rgb(109, 109, 255);
  border: 0ch;
  background-color: white;
}
.total-mid-1{

  position: absolute;
  right: -14px;
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-left: 15px solid rgb(0, 106, 255);
  border-bottom: 25px solid transparent;
}

.total-right-1{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 500px;
  height: 50px;
  background: #ececec;
}

.total-left-1{

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: -1px;
  width: 500px;
  height: 50px;
  background: rgb(0, 106, 255);
}


    .total-mid{
        
        position: absolute;
        right: -14px;
        width: 0;
        height: 0;
        border-top: 25px solid transparent;
        border-left: 15px solid #ececec;
        border-bottom: 25px solid transparent;
    }

    .total-right{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        width: 500px;
        height: 50px;
        background: rgb(0, 106, 255);
    }

    .total-left{
        
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        right: -1px;
        width: 500px;
        height: 50px;
        background: #ececec;
    }

    .total-block{
        
        padding-bottom: 70px;
        
        display: flex;
        flex-direction: row;
    }

    .dropdown{
        
        margin-left: 10px;
        margin-top: 20px;
    }

    .example-showcase .el-dropdown-link {
        
        cursor: pointer;
        color: var(--el-color-primary);
        display: flex;
        align-items: center;
    }

    .bottom-1{
        margin-top: 80px;
        padding-top: 18px;
        padding-bottom: 18px;
        background-color: black;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .black-text-1{
        
        color:#afafaf;
        font-size: 11px;
        
    }

    .black-bottom-1{
        border-top: #747474 0.3px solid;
        background-color: black;
        
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .head-title{
        font-size: 16px;
        font-weight: bold;
    }

    .texts{
        display: flex;
        flex-direction: column;
        padding-left: 5%;
        padding-right: 5%;
        padding-bottom: 40px;
    }

    .body-head{
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 20px;
    }

    .body-text{

        background-color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 3%;
        padding-bottom: 3%;
        margin-left: 15%;
        margin-right: 15%;
        
    }

    .back{
        width:100%;
        padding-top: 1.2%;
        background: #ececec;
    }

    .menu{
        overflow: hidden;
        width: 580px;
    }
    .top{
        
        border-bottom: 2px solid;
        border-bottom-color: #D3D3D3;
        display: flex;
        width: 100%;
        height: 60px;
    }

    .icon{
        
        
        margin-left: 240px;
        margin-right: 35px;
    }

    .el-menu-popper-demo{
        transform: rotateX(180deg);
    }

    .top-text{
        transform: rotateX(180deg);
    }

    .top-button{

        margin-top: 10px;
        margin-left: 50px;
    }


.pdf{
  margin-right: 5px;
  margin-left: 10px;
  width: 25px;
  height: 29px;
}

.word{
  width: 30px;
  height: 35px;
  margin-right: 5px;
  margin-left: 8px;
}
</style>